<template>
  <div>
    <el-row class="w-[80%] mx-auto mt-5">
      <el-col :span="6" v-for="item in data.data.rows" :key="item.id">
        <nuxt-link :to="{ path: '/detail/detail', query: { id: item.id } }">
          <u-card style="margin-bottom: 20px; width: 300px">
            <template #header>{{ item.title }}</template>
            <template #default>
              <div>{{ item.content }}</div>
            </template>
            <template #footer>
              <el-image :src="item.cover" class="w-[200px] h-[100px]" />
            </template>
          </u-card>
        </nuxt-link>
      </el-col>
    </el-row>
    <div class="echarts">
      <div id="main" style="width: 600px;height:400px;"></div>
    </div>
  </div>
</template>

<script lang="js" setup>
import * as echarts from "echarts"

/** @type EChartsOption */
const option = {
  title: {
    text: '1',
  },
  tooltip: {
    showContent: true,
    extraCssText: 'width: 100px; height: 100px;',
  },
  legend: {
    data: ["销量"], 
  },
  xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
  },
  yAxis: {},
  series: [
    {
      name: "销量",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

onMounted(async () => {
  await nextTick();
  const myChart = echarts.init(document.getElementById("main"));
  myChart.setOption(option);
});


const { data } = await useAsyncData(
  () => {
    return getArticleList({});
  },
  {
    default: () => ({}),
  }
);
</script>

<style>
</style>
 